<template>
    <div class="chart-container">
        <chart id="QianxiMapEchart" :height="data.options.height+'px'" :data="data" :width="data.options.width+'px'" :options="data.options"/>
    </div>
</template>

<script>
require('echarts/map/js/china.js');  // 引入中国地图组件
import {getNewEcharts} from '@/api/api'
import Chart from '@/components/Charts/index'
var colors = [
    ['#FF8700', '#ffc300', '#00e473', '#009DFF'],
    ['#FF8700', '#ffc300', '#00e473', '#009DFF'],
    ['#FF8700', '#ffc300', '#00e473', '#009DFF'],
];
var colorIndex = 0;
var year = ["2014", "2015", "2016", "2017", "2018"];
var mapData = [
    [],
    [],
    [],
    [],
    [],
    []
];
var geoCoordMap = {
    '安徽省': [117.17, 31.52],
    '北京市': [116.24, 39.55],
    '重庆市': [106.54, 29.59],
    '福建省': [119.18, 26.05],
    '甘肃省': [103.51, 36.04],
    '广东省': [113.14, 23.08],
    '广西壮族自治区': [108.19, 22.48],
    '贵州省': [106.42, 26.35],
    '海南省': [110.20, 20.02],
    '河北省': [114.30, 38.02],
    '河南省': [113.40, 34.46],
    '黑龙江省': [128.36, 45.44],
    '湖北省': [112.27, 30.15],
    '湖南省': [112.59, 28.12],
    '吉林省': [125.19, 43.54],
    '江苏省': [118.46, 32.03],
    '江西省': [115.55, 28.40],
    '辽宁省': [123.25, 41.48],
    '内蒙古': [108.41, 40.48],
    '宁夏回族自治区': [106.16, 38.27],
    '青海省': [101.48, 36.38],
    '山东省': [118.00, 36.40],
    '山西省': [112.33, 37.54],
    '陕西省': [108.57, 34.17],
    '上海市': [121.29, 31.14],
    '海南': [108.77, 19.10],
    '四川省': [104.04, 30.40],
    '天津市': [117.12, 39.02],
    '西藏自治区': [91.08, 29.39],
    '新疆维吾尔自治区': [87.36, 43.45],
    '云南省': [102.42, 25.04],
    '浙江省': [120.10, 30.16],
    '澳门': [115.07, 21.33],
    '台湾省': [121.21, 23.53]
};
/*柱子Y名称*/
var categoryData = [];
var barData = [];
var geoMapData = {
    '安徽省': [117.17, 31.52],
    '北京市': [116.24, 39.55],
    '重庆市': [106.54, 29.59],
    '福建省': [119.18, 26.05],
    '甘肃省': [103.51, 36.04],
    '广东省': [113.14, 23.08],
    '广西壮族自治区': [108.19, 22.48],
    '贵州省': [106.42, 26.35],
    '海南省': [110.20, 20.02],
    '河北省': [114.30, 38.02],
    '河南省': [113.40, 34.46],
    '黑龙江省': [128.36, 45.44],
    '湖北省': [112.27, 30.15],
    '湖南省': [112.59, 28.12],
}
for (var key in geoMapData) {
    categoryData.push(key);
    mapData[0].push({
        "year": '2014',
        "name": key,
        "value": randomNum(100, 300)
    });
    mapData[1].push({
        "year": '2015',
        "name": key,
        "value": randomNum(100, 300)
    });
    mapData[2].push({
        "year": '2016',
        "name": key,
        "value": randomNum(100, 300)
    });
    mapData[3].push({
        "year": '2017',
        "name": key,
        "value": randomNum(100, 300)
    });
    mapData[4].push({
        "year": '2018',
        "name": key,
        "value": randomNum(100, 300)
    });

}
for (var i = 0; i < mapData.length; i++) {
    barData.push([]);
    for (var j = 0; j < mapData[i].length; j++) {
        barData[i].push(mapData[i][j].value)
    }
}
var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

var optionXyMap01 = {
    timeline: {
        data: year,
        axisType: 'category',
        show: true,
        autoPlay: true,
        playInterval: 3000,
        left: '10%',
        right: '10%',
        bottom: '20',
        width: '80%',
        label: {
            normal: {
                textStyle: {
                    color: '#666'
                }
            },
            emphasis: {
                textStyle: {
                    color: '#666'
                }
            }
        },
        symbolSize: 10,
        lineStyle: {
            color: '#555'
        },
        checkpointStyle: {
            borderColor: '#777',
            borderWidth: 2
        },
        controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
                color: '#666',
                borderColor: '#666'
            },
            emphasis: {
                color: '#aaa',
                borderColor: '#aaa'
            }
        },

    },
    baseOption: {
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut',
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'cubicInOut',
        grid: {
            right: '1%',
            top: '10%',
            bottom: '10%',
            width: '20%'
        },
        tooltip: {
            trigger: 'axis', 
            axisPointer: { 
                type: 'shadow', 
                shadowStyle: {
                    color: 'rgba(150,150,150,0.1)' //hover颜色
                }
            }
        },
        geo: {
            show: true,
            map: 'china',
            roam: true,
            zoom: 1,
            center: [113.83531246, 34.0267395887],
            label: {
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                    normal: {
                        borderColor: '#404a59',
                        borderWidth: 1,
                        areaColor: '#323c48',
                    },
                    emphasis: {
                        areaColor: '#2a333d',
                        borderWidth: 0
                    }
            }
        },
    },
    options: []

};
for (var n = 0; n < year.length; n++) {
    optionXyMap01.options.push({
        backgroundColor: '#fff',
        title: [{
                text: '地图数据统计',
                left: 'center',
                textStyle: {
                    color: '#666',
                    fontSize: 16,
                }
            },
            {
                id: 'statistic',
                text: year[n] + "年数据统计情况",
                right: '10%',
                top: 10,
                textStyle: {
                    color: '#666',
                    fontSize: 16
                }
            }
        ],
        xAxis: {
            type: 'value',
            scale: true,
            position: 'top',
            min: 0,
            boundaryGap: false,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 2,
                textStyle: {
                    color: '#666'
                }
            },
        },
        yAxis: {
            type: 'category',
            nameGap: 16,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#666'
                }
            },
            data: categoryData
        },
        series: [
            //未知作用
            {
                //文字和标志
                name: 'light',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(mapData[n]),
                symbolSize: function(val) {
                    return val[2] / 10;
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: colors[colorIndex][n]
                    }
                }
            },
            //地图？
            {
                type: 'map',
                map: 'china',
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#FFFFFF',
                    },
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                },
                animation: false,
                data: mapData
            },
            //地图点的动画效果
            {
                //  name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(mapData[n].sort(function(a, b) {
                    return b.value - a.value;
                }).slice(0, 20)),
                symbolSize: function(val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: colors[colorIndex][n],
                        shadowBlur: 10,
                        shadowColor: colors[colorIndex][n]
                    }
                },
                zlevel: 1
            },
            
            //柱状图
            {
                zlevel: 1.5,
                type: 'bar',
                symbol: 'none',
                itemStyle: {
                    normal: {
                        color: colors[colorIndex][n],
                        barBorderRadius: [0, 5, 5, 0]
                    }
                },
                barWidth: '',
                data: barData[n]
            }
        ]
    })
}
function randomNum(minNum, maxNum) {
    switch (arguments.length) {
        case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
        case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
        default:
            return 0;
            break;
    }
}
import echart from '@/mixins/echart'
export default {
    name: 'PaimingMapEchart',
    mixins: [echart],
    created(){
        this.data.options = {...this.data.options,...optionXyMap01}
    },
    methods: {
        _getNewEcharts(){
            const parms = {
                echartType:"pie",
                sourceId:this.data.options.sourceId
            }
            getNewEcharts(parms).then(res=>{
                if(res.rcode=='0000'){
                    this.data.options.series[0].data = res.data.seriesData
                    this.data.options.legend.data = res.data.legendData
                    
                }
            })
        }
    }
}
</script>
